<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/03.littleRedBook.css" />
    <title>小红书</title>
  </head>
  <body>
    <!-- 左侧 -->
    <div class="left">
      <!-- 顶部 -->
      <div class="top">
        <!-- 图片素材获取
            1. 工作时：UI 设计提供
            2. 学习时：网络，iconfont 
        -->
        <img
          class="logo"
          src=""
          alt=""
        />
        <ul class="menu">
          <li>
            <img src="./imgs/home.png" alt="" />
            <a href="#">发现</a>
          </li>
          <li>
            <img src="./imgs/plus-square.png" alt="" />
            <a href="#">发布</a>
          </li>
          <li>
            <img src="./imgs/Bell_ringing.png" alt="" />
            <a href="#">通知</a>
          </li>
          <li>
            <img src="./imgs/icon.webp" alt="" />
            <a href="#">我</a>
          </li>
        </ul>
      </div>
      <!-- 底部 -->
      <div class="bottom menu">
        <img src="./imgs/more.png" alt="" />
        <a href="#">更多</a>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="right">
      <!-- 顶部 -->
      <div class="header">
        <div class="layout"></div>
        <img src="./imgs/searchbar.png" alt="" />
        <ul class="nav-items">
          <li><a href="#">创作中心</a></li>
          <li><a href="#">业务合作</a></li>
        </ul>
      </div>
      <!-- 导航 -->
      <div class="nav">
        <a href="#">推荐</a>
        <a href="#">穿搭美食</a>
        <a href="#">彩妆</a>
        <a href="#">影视</a>
        <a href="#">职场</a>
        <a href="#">情感</a>
        <a href="#">家居</a>
        <a href="#">游戏</a>
        <a href="#">旅行</a>
        <a href="#">健身</a>
      </div>
      <!-- 内容 -->
      <div class="content">
        <img src="./imgs/content1.png" alt="" />
        <img src="./imgs/content2.png" alt="" />
        <img src="./imgs/content3.png" alt="" />
      </div>
    </div>

    <!-- 返回顶部 -->
    <img class="toTop" src="./imgs/toTop.png" alt="" />
  </body>
</html>
